﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>潮汐</title>
    <style>
        .chart
        {
            text-align: center;
            margin: 10px auto;
            position: relative;
            z-index: 0;
        }
        .AQILegendText
        {
            height: 20px;
            line-height: 20px;
            border: solid 0px blue;
        }
    </style>
    @Scripts.Render("~/bundles/jquery")
    <script src="/Scripts/hightcharts/highcharts.js"></script>
    <script src="/Scripts/tide.js?v=201504"></script>
    <script type="text/javascript" src="/Scripts/date/WdatePicker.js"></script>

    <script>
       /* $.getJSON("/index.php?m=resource&c=tide&a=get_tide_data&portid=64&date=2015-04-16", null, function (data) {
            if (data && data.length && data[0].data.length) {
                var date = new Date(data[0].data[0][0]);
                var name = '吴淞';
                data[0].name = name;
                var title = name + ' 2015-04-16 ' + "潮汐表曲线图";
                var options = { id: 'tide_content', data: data, title: title };
                $("#tide_content").tideSimpleChart(options);
            }
        });*/
        var stationName = "塘沽";
        $(document).ready(function () {
            $("#selectStation a").bind("click", function () {
                stationName = $(this).attr("data");
                showChart();
            });

            showChart();
        });
        //[["2011\/12\/10",1137.41],["2011\/12\/17",1134.74],["2011\/12\/24",1139.21],["2011\/12\/31",1140.96],["2012\/01\/07",1135.83],["2012\/01\/14",1123.66],["2012\/01\/21",1103.37],["2012\/02\/04",1097.57],["2012\/02\/11",1096.63],["2012\/02\/18",1118.28],["2012\/02\/25",1140.38],["2012\/03\/03",1158.92],["2012\/03\/10",1184.18],["2012\/03\/17",1223.52],["2012\/03\/24",1249.6],["2012\/03\/31",1242.87],["2012\/04\/07",1206.59],["2012\/04\/14",1185.11],["2012\/04\/21",1168.19],["2012\/04\/28",1155.71],["2012\/05\/05",1144.62],["2012\/05\/12",1122.66],["2012\/05\/19",1104.58],["2012\/05\/26",1090.05]]
        var showChart = function () {
            //[[1429113600000, 207], [1429117200000, 306], [1429120800000, 404], [1429124400000, 462], [1429126260000, 470], [1429128000000, 463], [1429131600000, 418], [1429135200000, 344], [1429138800000, 257], [1429142400000, 173], [1429146000000, 107], [1429149600000, 72], [1429151160000, 68], [1429153200000, 76], [1429156800000, 127], [1429160400000, 225], [1429164000000, 350], [1429167600000, 456], [1429171200000, 507], [1429172340000, 510], [1429174800000, 497], [1429178400000, 443], [1429182000000, 362], [1429185600000, 268], [1429189200000, 178], [1429192800000, 115], [1429196400000, 88], [1429196700000, 88]]
            $.ajax({
                type: "GET",
                contentType: "application/json",
                dataType: "json",
                url: "/Wap/TideJson/" + stationName + "?querydate=" + $("#selectDate").val(),
                success: function (json) {
                    var data = [{ "name": stationName, "data": json.data}];
                    if (data && data.length && data[0].data.length) {
                        //var date = new Date(data[0].data[0][0]);
                        var name = stationName;
                        //data[0].name = name;
                        var title = name + ' ' + json.querydate + " 潮汐表曲线图";
                        var options = { id: 'tide_content', data: data, title: title };
                        $("#tide_content").tideSimpleChart(options);
                    }
                }
            });


        };
        
    </script>
    
</head>
<body>
    <div class="chart">
        <div id="tide_content" style="width: 640px; height: 406px;">
        </div>
        <div style="margin-left: 15px; width: 90%; height: 25px; text-align: left; float: left;">
            <div class="AQILegendText" id="selectStation">选择地点：
                <a href='javascript:void(0);' data="塘沽">塘沽</a>
                <a href='javascript:void(0);' data="曹妃甸">曹妃甸</a>
                <input type="text" style="width:75px;" value="@ViewBag.CurDate" id="selectDate" onFocus="WdatePicker({onpicked:function(){showChart();},startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true})"/>
            </div>
        </div>
        
    </div>
</body>
</html>
